<template>
    <div style="padding: 10px;width: 1300px;margin: 0 auto;min-height: calc(100vh - 20px);">
        <div class="operation-bar">
            <router-link to="/main/renshi/jixiao/jxshensu">
                <el-button type="primary">返回</el-button>
            </router-link>
            <router-link style="margin-left: 10px;" to="/main/renshi/jixiao/jxshensu">
                <el-button type="primary">新增</el-button>
            </router-link>
        </div>
        <h2>绩效考评申诉列表</h2>

        <!-- 添加搜索框 -->
        <div class="search-bar">
            <el-input v-model="searchForm.name" placeholder="姓名" style="width: 180px; margin-right: 10px;" />
            <el-input v-model="searchForm.department" placeholder="部门" style="width: 180px; margin-right: 10px;" />
            <el-input v-model="searchForm.directSuperior" placeholder="直接上司"
                style="width: 180px; margin-right: 10px;" />
            <el-input v-model="searchForm.handler" placeholder="处理人" style="width: 180px; margin-right: 10px;" />
            <el-date-picker v-model="searchForm.appealDateRange" type="daterange" range-separator="至"
                start-placeholder="申诉开始日期" end-placeholder="申诉结束日期" style="width: 350px; margin-right: 10px;"
                value-format="yyyy-MM-dd" />
            <span style="white-space: nowrap;">
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </span>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="position" label="职位" width="120" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="entryDate" label="入职日期" width="calc(100% - 120)">
                <template v-slot="scope">
                    {{ formatDate(scope.row.entryDate) }}
                </template>
            </el-table-column>
            <el-table-column prop="appealDate" label="申诉日期" width="calc(100% - 120)">
                <template v-slot="scope">
                    {{ formatDate(scope.row.appealDate) }}
                </template>
            </el-table-column>
            <el-table-column prop="directSuperior" label="直接上司" width="calc(100% - 100)" />
            <el-table-column prop="handler" label="处理人" width="calc(100% - 120)" />
            <el-table-column prop="createTime" label="创建时间" width="calc(100% - 180)">
                <template v-slot="scope">
                    {{ formatDateTime(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
                <template v-slot="scope">
                    <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.row)"
                        style="color: #F56C6C;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" />
        </div>
    </div>
</template>

<script>
import { getPerformanceAppealList, deletePerformanceAppeal } from '@/api/performanceAppeal'
import { formatDate, formatDateTime } from '@/utils/date'
export default {
    data() {
        return {
            searchForm: {
                name: '',
                department: '',
                directSuperior: '',
                handler: '',
                appealDateRange: []
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        async fetchData() {
            try {
                const params = {
                    current: this.currentPage,
                    size: this.pageSize,
                    name: this.searchForm.name,
                    department: this.searchForm.department,
                    directSuperior: this.searchForm.directSuperior,
                    handler: this.searchForm.handler
                }

                if (this.searchForm.appealDateRange && this.searchForm.appealDateRange.length === 2) {
                    params.startDate = this.searchForm.appealDateRange[0]
                    params.endDate = this.searchForm.appealDateRange[1]
                }

                const response = await getPerformanceAppealList(params)
                this.tableData = response.data.records
                this.total = response.data.total
            } catch (error) {
                this.$message.error('获取列表失败：' + error.message)
            }
        },
        formatDate(date) {
            if (!date) return ''
            return date.split('T')[0]
        },
        formatDateTime(time) {
            if (!time) return ''
            const date = new Date(time)
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },
        handleView(row) {
            this.$router.push(`/main/renshi/jixiao/jxshensu?id=${row.id}&mode=view`)
        },
        handleEdit(row) {
            this.$router.push(`/main/renshi/jixiao/jxshensu?id=${row.id}&mode=edit`)
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                await deletePerformanceAppeal(row.id)
                this.$message.success('删除成功')
                this.fetchData()
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败：' + error.message)
                }
            }
        },
        handleSearch() {
            this.currentPage = 1
            this.fetchData()
        },
        resetSearch() {
            this.searchForm = {
                name: '',
                department: '',
                directSuperior: '',
                handler: '',
                appealDateRange: []
            }
            this.handleSearch()
        }
    }
}
</script>

<style scoped>
.operation-bar {
    position: relative;
    /* margin-bottom: 20px; */
    display: flex;
}

button.el-button.el-button--primary {
    font-family: '宋体';
    font-size: 1em;
    padding: 8px 12px;
}

button.el-button {
    font-family: '宋体';
    font-size: 1em;
    padding: 8px 12px;
    margin-top: 3px;
}

.search-bar {
    margin: 20px 0;
    display: flex;
    /* align-items: center; */
    /* flex-wrap: wrap; */
}

.search-bar .el-input,
.search-bar .el-select,
.search-bar .el-date-picker {
    margin-bottom: 10px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style>